<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0;">
      <el-form :inline="true" :model="permissionQuery">
        <el-form-item>
          <el-input v-model="permissionQuery.keyword" placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd" disabled>新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="permissionTrees" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;margin-bottom: 20px;"
    row-key="id" border  :tree-props="{children: 'children'}">
      <el-table-column type="selection" width="100">
      </el-table-column>
      <el-table-column type="index" width="100">
      </el-table-column>
      <el-table-column prop="name" label="名字" >
      </el-table-column>
      <el-table-column prop="url" label="访问路径" >
      </el-table-column>
      <el-table-column prop="sn" label="标识" width="240">
      </el-table-column>
      <el-table-column prop="descs" label="描述" >
      </el-table-column>
      <el-table-column label="操作" width="240">
        <template scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)" disabled>编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)" disabled>删除</el-button>
<!--          <el-button type="danger" size="small" @click="handlePermission(scope.$index, scope.row)">设置权限</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <!--  新增和编辑
          :visible.sync ture就打开  false就隐藏
    -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="permissionForm" :rules="permissionForm" ref="permissionForm">
        <el-form-item label="权限名字" :label-width="formLabelWidth" prop="name">
          <el-input v-model="permissionForm.name"></el-input>
        </el-form-item>
        <el-form-item label="标识" :label-width="formLabelWidth" prop="sn">
          <el-input v-model="permissionForm.sn"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth" prop="url">
          <el-input v-model="permissionForm.url"></el-input>
        </el-form-item>
        <!--
          options:级联框数据源
          props:
            expandTrigger:打开下级的方式
            value:配置对象的里面的提交数据的key
            label:配置对象的里面的显示数据的key
            checkStrictly:可选择任意的一级
        -->
<!--        <el-form-item label="上级" :label-width="formLabelWidth">-->
<!--          <el-cascader-->
<!--              v-model="roleForm.parent"-->
<!--              :options="roleTrees"-->
<!--              :props="{ expandTrigger: 'hover',-->
<!--               value: 'id',-->
<!--               label: 'name',-->
<!--               }"-->
<!--          ></el-cascader>-->
<!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit" :loading="addLoading">确 定</el-button>
      </div>
    </el-dialog>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
      <el-pagination
          layout="total, prev, pager, next"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :page-size="pageSize"
          :total="total"
          :current-page="currentPage"
          style="float:right;">
      </el-pagination>
    </el-col>
  </section>
</template>

<script type="text/javascript">
  export default {
    data(){
      return {
        addLoading:false,
        permissionForm:{
          id:null,
          name:"",
          sn:"",
          parent:{},
        },
        dialogFormVisible:false,
        title:"修改",
        pageInfo:[],
        permissionQuery:{
          keyword: "",
        },
        currentPage:1,
        pageSize:100,
        listLoading:true,
        sels:[],
        total:0,
        permissionList:[],
        formLabelWidth:"120px",
        permissionTrees:[],
      }
    },
    methods:{
      onSubmit(){
        this.addLoading = true;
        this.$confirm('确认提交吗？', '提示', {}).then(() => {
          this.$http.put('/authPermission', this.roleForm).then(res => {
            this.addLoading = false;
            if (res.data.success) {
              this.$message.success("添加操作成功！");
            }else {
              this.$message.error("添加操作失败！");
            }
            this.dialogFormVisible=false;
            this.loadListData();
          });
        }).catch(() => {
          this.addLoading = false;
          this.$message.info("取消操作");
        })
      },
      loadTree(){
        this.$http.get("/authPermission/permissionTree").then(res=>{
          console.log(this.permissionTrees);
          this.permissionTrees = res.data.data;
          console.log("----------")
          console.log(this.permissionTrees);
          this.listLoading = false;
        })
      },
      loadListData(){
        let param={
          keyword: this.permissionQuery.keyword,
          currentPage:this.currentPage,
          pageSize:this.pageSize
        };
        this.$http.post("/authPermission",param).then(res=>{
          let {data,message,success} = res.data
          this.permissionTrees = data.dataList;
          this.total = data.totals;
          console.log("-----=--=-=-=-=--=")
          console.log(this.permissionTrees)
          console.log("--------------------------------")
          this.listLoading = false;
          if (param.keyword===""){
            this.loadTree();
          }
        })
      },
      search(){
        this.loadListData();
      },
      handleAdd(){
        //清空表单
        this.permissionForm={
          id: null,
          name: "",
          sn: "",
          parent_id: '',
          parent: {}
        }
        //修改标题，打开模态框
        this.title = '新增';
        //2、打开弹出框
        this.dialogFormVisible = true;
      },
      selsChange(ids){
        this.sels = ids;
      },
      handleEdit(index,row){
        this.title = '修改';
        //数据回显
        this.permissionForm=row;
        //2、打开弹出框
        this.dialogFormVisible = true;
      },
      //删除
      handleDel: function (index, row) {
        this.$confirm('此操作将永久删除该权限信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.listLoading = true;
          this.$http.delete("/authPermission/"+row.id).then(res => {
            this.listLoading = false;
            if (res.data.success){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }else {
              this.$message({
                type: 'error',
                message: '删除失败!'
              });
            }
              this.loadListData();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handlePermission(){

      },
      batchRemove(){
        //把对象数组转成 id数组
        let permissionIds = this.sels.map(function (obj,index,array){
          return obj.id;
        })
        this.$http.delete("/authRole/deleteList",{data:permissionIds}).then(res=>{
          let{message,success} = res.data
          if (success){
            this.$message.success("删除成功！")
          }else {
            this.$message.error("操作失败！")
          }
          this.loadListData();
        })
      },
      handleCurrentChange(val){
        this.currentPage = val;
        this.loadListData();
      },
      handleSizeChange(val){
        this.pageSize = val;
        this.currentPage=1;
        this.loadListData();
      },
    },
    mounted() {
      this.loadListData();
      this.loadTree();
    }

  }
</script>
<style scoped>

</style>